<template>
  <div class="play-mv"
       v-if="id!=null&&detail!=null">
    <scroll class="play-mv-scroll"
            ref="scroll"
            :pull-up-loa="true"
            @pullingUp="pullingUp()">
      <!-- 左边 -->
      <div class="layout-left">
        <!-- mv标题 -->
        <div class="title"
             v-if="detail!=null">
          <div class="left-mv">MV</div>
          <div class="name">{{detail.name}}</div>
          <div class="artist">{{detail.artistName}}</div>
        </div>
        <!-- mv视频 -->
        <div class="viode"
             v-if="url!=null">
          <video :src="url"
                 controls
                 autoplay
                 width="100%"
                 class="video-play"></video>
        </div>
        <div class="recommend">
          <p class="p">评论</p>
          <recommends class="rec"
                      :recommends="recommends" />
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="desc">
          <p class="p">MV介绍</p>
          <div class="base">
            <div class="data">发布时间：{{detail.publishTime}}</div>
            <div class="playCount">播放次数：{{detail.playCount}}次</div>
            <!-- 清除浮动 -->
            <div class="clear"></div>
          </div>
          <!-- mv简介 -->
          <div class="mv-desc"
               ref="mvDesc"
               v-if="detail.desc!=null"
               @mouseenter="enter()"
               @mouseleave="leave()">
            <scroll class="desc-scroll"
                    ref="descScroll">
              <span>简介</span>
              {{detail.desc}}
            </scroll>
          </div>
        </div>
        <!-- 相关推荐 -->
        <div class="alia">
          <p class="p">相关推荐</p>
          <simi-mv-item :mv-list='simiMv' />
        </div>
      </div>
      <!-- 清除浮动 -->
      <div class="clear"></div>
    </scroll>
  </div>
</template>

<script>
import Scroll from '../../components/common/scroll/Scroll.vue'
import Recommends from '../musicListDetail/childComps/Recommends.vue'
import SimiMvItem from 'views/mv/childComps/SimiMvItem'
import {
  _getMvDetail,
  _getMVUrl,
  _getMVComment,
  _getSimiMv,
  MV
} from 'network/mv'
export default {
  name: 'PlayMV',
  components: { Recommends, Scroll, SimiMvItem },
  data () {
    return {
      id: null,
      // mv的详情
      detail: null,
      // mv地址
      url: null,
      recommends: null,
      offset: 1,
      limit: 20,
      // 推荐mv数组
      simiMv: []
    }
  },
  // 就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行
  watch: {
    $route () {
      this.id = this.$route.params.id;
      if (this.id != null) {
        this.getBaseInfo();
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    if (this.id != null) {
      this.getBaseInfo();
    }
  },
  methods: {
    // 向上拉，获取更多评论
    pullingUp () {
      this.getComment();
    },
    // 获取mv评论
    getComment () {
      _getMVComment(this.id, this.offset * this.limit).then(res => {
        this.recommends = res.data.comments
        this.offset++
        this.$refs.scroll.finishPullUp()
      })
    },
    // 获取mv所有相关信息
    getBaseInfo () {
      // 获取mv详情
      _getMvDetail(this.id).then(res => {
        this.detail = res.data.data
      })
      _getMVUrl(this.id).then(res => {
        this.url = res.data.data.url
      })
      _getMVComment(this.id, this.limit).then(res => {
        this.recommends = res.data.comments
      })
      // 获取推荐mv
      _getSimiMv(this.id).then(res => {
        for (const i of res.data.mvs) {
          const mv = new MV(i.id, i.cover, i.name, i.artistName, i.playCount)
          this.simiMv.push(mv)
          if (i === res.data.mvs.length - 1) {
            return
          }
        }
      })
    },
    enter () {
      this.$refs.scroll.disable()
    },
    leave () {
      this.$refs.scroll.enable()
    }
  }
}
</script>

<style>
.play-mv {
  width: 100%;
  height: calc(100vh - 49px);
  padding: 10px 5%;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  color: #333;
}
.play-mv-scroll {
  height: 100%;
}
.layout-left {
  display: inline-block;
  width: 70%;
}
.layout-left .title {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.title .left-mv {
  padding: 5px;
  display: inline-block;
  border: 1px solid red;
  color: red;
}
.title .name {
  /* 单行文本溢出... */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 18px;
  margin-left: 5px;
}
.title .artist {
  margin-left: 5px;
}
.video-play {
  outline-style: none;
}
/* 右边 */
.right {
  padding-left: 20px;
  box-sizing: border-box;
  width: 30%;
  float: right;
  color: #333;
}
.p {
  font-size: 18px;
  margin-bottom: 10px;
}
.base {
  font-size: 12px;
  margin-bottom: 10px;
}
.base .data {
  float: left;
}
.base .playCount {
  float: right;
}
.mv-desc {
  max-height: 288px;
  width: 100%;
  overflow: hidden;
  line-height: 1.2em;
  font-size: 13px;
  margin-bottom: 15px;
  text-overflow: ellipsis;
}
.desc-scroll {
  max-height: 288px;
}
.mv-desc span {
  font-size: 14px;
  color: #00aa85;
}
.recommend {
  margin-top: 10px;
}
.rec {
  margin-top: 5px;
  padding: 5px 0 10px 0;
}
.clear {
  clear: both;
}
</style>
